<template>
	<view>
		<!-- 轮播图 -->
		<swiper indicator-dots autoplay class="swiper" @click="handlePreview">
			<block v-for="(item, index) in detail.pics" :key="index">
				<swiper-item>
					<image :src="item.pics_big" mode="aspectFill"></image>
				</swiper-item>
			</block>
		</swiper>
		
		<!-- 商品的信息 -->
		<view class="goods-info">
			<!-- 价格和分享的图标 -->
			<view class="goods-info-top">
				<view class="goods-price">
					￥{{detail.goods_price || ""}}
				</view>
				<view class="goods-action">
					<!-- 两个图标 -->
					<view class="iconfont iconfenxiang_2">
						<!-- 分享的按钮 -->
						<button open-type="share"></button>
					</view>
					<view class="iconfont iconshoucang"></view>
				</view>
			</view>
			<!-- 标题 -->
			<view class="goods-title">
				{{detail.goods_name}}
			</view>
		</view>
		
		<!-- 富文本 -->
		<view class="rich-wrapper">
			<view class="rich-title">
				图文详情
			</view>
			<!-- 富文本的内容 -->
			<rich-text :nodes="detail.goods_introduce"></rich-text>
		</view>
		
		<!-- 定位在底部的固定栏 -->
		<view class="footer">
			<view class="btn-mini">
				<view class="iconfont iconkefu">
				</view>
				<view>联系客服</view>
				<!-- 分享的按钮 -->
				<button open-type="contact"></button>
			</view>
			<navigator url="/pages/cart/index" open-type="switchTab" class="btn-mini">
				<view class="iconfont icongouwuche"></view>
				<view>购物车</view>
			</navigator>
			<view class="btn-small">
				<button @click="handleAddCart">加入购物车</button>
			</view>
			<view class="btn-small">
				<button>立即购买</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 商品详情
				detail: {},
				//预览的图片的数组
				pics: []
			}
		},
		onLoad(query){
			wx.showLoading({
			  title: '加载中'
			})
			
			// 请求商品的详情
			uni.request({
				url: "https://api-hmugo-web.itheima.net/api/public/v1/goods/detail",
				data: {
					goods_id: query.goods_id
				},
				success: res => {
					// message是商品详情
					const {message} = res.data;
					this.detail = message;
					
					// 构造一个符合previewImage使用的数组
					this.pics = message.pics.map(v => {
						return v.pics_big;
					});
					
					wx.hideLoading();
				}
			})
		},
		methods: {
			// 预览图片
			handlePreview(){
				wx.previewImage({
					urls: this.pics
				})
			},
			// 加入购物车
			handleAddCart(){
				// 把商品的详情（this.detail）保存到本地
				
				// 先把本地的goods先获取出来，如果为空就等于空对象，如果有值就作为初始值
				const goods = uni.getStorageSync("goods") || {};
				
				// 如果商品已经存在了，数量就加一
				if(goods[this.detail.goods_id]){
					// 数量就加一
					goods[this.detail.goods_id].number += 1;
				}else{
					// 给当前的商品添加状态
					this.detail.selected = true;
					// 购物车的初始的数量
					this.detail.number = 1;
					// 用id作为key，主要是方便查找元素
					goods[this.detail.goods_id] = this.detail;
				}
				
				// 把goods存储到本地,使用同步的方法来存储
				uni.setStorageSync("goods", goods);
			}
		}
	}
</script>

<style lang="less">
.swiper{
	height: 497rpx;
	width: 750rpx;
	
	image{
		width: 100%;
		height: 100%;
	}
}

.goods-info{
	padding: 20rpx 20rpx 50rpx 20rpx;
	border-bottom: 10px #eee solid;
	
	.goods-info-top{
		display: flex;
		justify-content: space-between;
		margin-bottom: 5px;
		
		.goods-price{
			color: red;
		}
		
		.goods-action{
			display: flex;
			.iconfont{
				margin-left: 10px;
				position: relative;
				
				button{
					position: absolute;
					left: 0;
					top:0;
					background: #000;
					width: 100%;
					height: 100%;
					opacity: 0;
				}
			}
		}
		
		.goods-action *{
			color: #999;
		}
	}
	
	.goods-title{
		font-size: 14px;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		line-height: 1.8;
	}
}

.rich-wrapper{
	padding: 20rpx 0 100rpx 0;
	
	.rich-title{
		text-align: center;
		font-size: 14px;
	}
}

.footer{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	display: flex;
	padding: 0 20rpx;
	box-sizing: border-box;
	height: 94rpx;
	border-top: 1px #eee solid;
	background: #fff;
	
	.btn-mini{
		width: 20%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 12px;
		position: relative;
		
		.iconfont{
			font-size: 16px;
		}
		
		button{
			position: absolute;
			left: 0;
			top:0;
			background: #000;
			width: 100%;
			height: 100%;
			opacity: 0;
		}
	}
	
	.btn-small{
		width: 30%;
		display: flex;
		align-items: center;
		
		button{
			border-radius: 50px;
			color: #fff;
			background: orange;
			width: 196rpx;
			height: 60rpx;
			font-size: 12px;
			line-height: 60rpx;
			padding: 0;
			border: none;
		}
		
		&:last-child button{
			background: red;
		}
	}
}
</style>
